<template >
    <div >
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="序号"
                    width="280">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="280">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="日期">
            </el-table-column>
            <el-table-column>
                <template slot-scope="scope">
                <el-button type="success" round @click="add">添加</el-button>
                <el-button type="info" round @click="update(scope.row.id)">修改</el-button>
                <el-button type="warning" round @click="shanchu(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <el-dialog
                title="添加用户"
                :visible.sync="dialogVisible"
                width="30%">

            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="请输入id">
                    <el-input v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="请输入姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="请输入地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="请选择日期">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.data" style="width: 400px;"></el-date-picker>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="querentianjia(form)">确定添加</el-button>
  </span>
        </el-dialog>

        <el-dialog
                title="修改"
                :visible.sync="dialogVisible1"
                width="30%">

            <el-form ref="form" :model="idFrom" label-width="120px" :data="idFrom">
                <el-form-item label="请输入id">
                    <el-input v-model="idFrom.id"></el-input>
                </el-form-item>
                <el-form-item label="请输入姓名">
                    <el-input v-model="idFrom.name"></el-input>
                </el-form-item>
                <el-form-item label="请输入地址">
                    <el-input v-model="idFrom.address"></el-input>
                </el-form-item>
                <el-form-item label="请选择日期">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.data" style="width: 400px;"></el-date-picker>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="querenxiugai(idFrom)">确定修改</el-button>
  </span>
        </el-dialog>

    </div>

</template>

<script>
    import Model  from "../components/Model";
    //1 导入组件
    //import My from "../components/My"
    export default {
        name: "My",
        props:["num2"],

        components:{
            Model
        },
        data(){
            return{
                tableData:[],
                userInfo:[],
                dialogVisible:false,
                dialogVisible1:false,
                form:{},
                idFrom:[],
                num:0,
                currentPage:1,
                pageSize:5,
                total:0,
            }
        },
        //页面初始化
        created() {
            this.initTable();
        },
        methods:{
            initTable(){
                this.$http.post("http://localhost:7000/user/selectAll?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(resp=>{
                    if (resp.data.code===200){
                        this.tableData=resp.data.data.list;
                        this.total=resp.data.data.total;
                    }else if (resp.data.code===4001){
                        this.$message.error("未登录");
                        this.$router.push("/")
                    }
                })
            },
            add(){
                this.dialogVisible=true;
            },
            querentianjia(from){
                this.$http.post("http://localhost:7000/user/addUser",from).then(resp=>{
                }),
                this.dialogVisible=false;
                this.initTable();
            },
            update(id){
                this.dialogVisible1=true;
                this.$http.get("http://localhost:7000/user/selectOne?id="+id).then(resp=>{
                    this.idFrom=resp.data.data;
                }),
                    this.initTable();
            },
            querenxiugai(idFrom){
                this.$http.post("http://localhost:7000/user/updateUser",idFrom).then(resp=>{

                }),
                    this.dialogVisible=false;
                this.initTable();
            },
            shanchu(id){
                this.$http.get("http://localhost:7000/user/delete?id="+id).then(resp=>{
                    this.initTable();
                })
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },

        }
    }
</script>

<style scoped>

</style>